<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>待办事项列表练习1</title>
    <style>
    .yi{
        margin-top: 10px;
    }
    .er{
        margin-top: 10px;
    }
    .completed-class {
      background: #eaeaea;
      text-decoration: line-through;
    }
    .active {
      background: #f00;
      color: #fff;
    }
    
    </style>
</head>
<body>
    <div id="app">
        <h1>待办事项列表</h1>
        <div>
        <input 
        ref="inputRef"
        type="text" 
        placeholder="请输入新待办事项"
        v-model.trim="inputValue"
        @keydown.enter="addTodoItem"
        >
        <button @click="addTodoItem">添加</button>
        </div>

        <div>
        <div class="yi">
            <button :class="{active: type === 'all'}" @click="filter('all')">所有</button>
            <button :class="{active: type === 'completed'}" @click="filter('completed')">已完成</button>
        <button :class="{active:type==='uncompleted'}" @click="filter('uncompleted')">未完成</button>
        </div>

        <div v-if="todos.length === 0" class="er">待办事项列表为空</div>
       <ul v-else>
                <li v-for="todo in currentTodos">
                 <span 
                 :class="{'completed-class': todo.completed}" 
                 :style="{display: 'inline-block'}"
                 >
                 {{todo.id}}-{{todo.title}}-{{todo.completed?'已完成':'未完成'}}
                </span>

              <button @click="toggleTodoItem(todo.id)">
                    标记为{{todo.completed?'未':'已'}}完成
                </button>
                <button @click="removeTodoItem(todo.id)">删除</button>   
            </li>
        </ul> 
        </div>
</div>

<script src="./lib/vue.js"></script>
<script>
    let index=2  //全局编号
    const vm = new Vue({
        el:'#app',
        data:{
            inputValue:'初始值',//文本框中绑定的数据
            todos:[{//定义数组保存所有待办事项
                id:1,
                title:'复习HTML',
                completed:false
            }],
            /* 筛选待办事项数据的类型 all：所有；completed：已完成；uncompleted:未完成 */
            type:'all',
            currentTodos:[],//当前显示的待办事项数组
        },
        computed:{
            completedTodos() {//已完成待办事项
                return this.todos.filter(todo=>todo.completed)
            },
            uncompletedTodos(){//未完成待办事项
                return this.todos.filter(todo=>!todo.completed)
            }
        },
        methods:{
            addTodoItem() {//添加新待办事项
            this.$refs.inputRef.focus() //文本框自动获得焦点

            if(this.inputValue.length === 0){//输入为空，则不添加
                    return
                }

            this.todos.push({ //向数组中添加新待办事项对象
                id: index++,
                title: this.inputValue,
                completed: false,
            })
            this.inputValue='' //清空文本框
            },

            toggleTodoItem(id) {//修改待办事项完成状态
                this.todos.forEach(todo=>{
                    if(todo.id === id) {
                        todo.completed = !todo.completed
                    }
                })
            },

            removeTodoItem(id) {//删除待办事项
            this.todos = this.todos.filter(todo=>todo.id !== id)
            },

            filter(type) {//筛选数据
                this.type = type
            }
        },
        watch:{
            type:{//监视type取值变化，当type变化时，修改当前渲染的todos数据
              handler(val) {
                switch(val) {
                    case 'all':
                        this.currentTodos = this.todos
                        break
                    case 'completed':
                        this.currentTodos = this.completedTodos
                        break 
                    case 'uncompleted':
                        this.currentTodos = this.uncompletedTodos
                        break 
                }
            },
            immediate:true
            }
        }
    })
    console.log(vm)
    
    
    </script>
</body>
</html>